<style lang="scss" scoped>
li {
  //   height: 0.48rem;
  padding: 0.16rem 0;
  // &>div{
  //     height: .48rem;
  //     line-height: .48rem;
  // }
  .tit {
    width: 0.75rem;
  }
  span {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 0.08rem;
    border: 1px solid #c1c1c1;
    margin-right: 0.05rem;
  }
  .tit1 {
    width: 1.7rem;
  }
  .tit2 {
    width: 1.4rem;
  }
}

footer {
  padding: 0.3rem 0;
}
select {
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("../../image/san.png") no-repeat scroll right center
    transparent;

  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 0.1rem !important;
}
select.site {
  width: 0.8rem;
}
.flex-parent div {
  box-sizing: border-box;
  flex: 0 0 50%;
}
#expectBack {
  width: 0.5rem;
}
#city {
  select {
    width: calc((100% - 0.75rem) / 3);
  }
}
#city1 {
  .tit2 {
    width: 1rem;
  }
  select {
    width: calc((100% - 1.4rem) / 3);
  }
}
</style>

<template>
    <div class="add_customer">
        <ul class="padding-lr15 bgfff">
            <li class="flex-col flex-middle border-b">
                <div class="tit">
                    <i class="cred">*</i>姓名</div>
                <input type="text" class="box1" v-model="customerInfo.clientName" placeholder="请填写姓名">
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit">
                    <i class="cred">*</i>手机</div>
                <input type="tel" class="box1" v-model="customerInfo.clientPhone" placeholder="请填写手机号">
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit">身份证</div>
                <input type="text" class="box1" v-model="customerInfo.clientIdcard" placeholder="请填写身份证号">
            </li>
            <li class="flex-col flex-middle border-b" id="city">
                <div class="tit">
                    <i class="cred">*</i>来源区域</div>
                <select @change="changeSiteInfo('customerInfo',1)" v-model="customerInfo.provinceid" class="c82 box1 site margin-r15">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in provinceList" :key="i" :value="it.provinceid">{{it.provinceName}}</option>
                </select>
                <select @change="changeSiteInfo('customerInfo',2)" v-model="customerInfo.cityid" class="c82 box1 site margin-r15">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in cityList" :key="i" :value="it.cityid">{{it.cityname}}</option>
                </select>
                <select @change="changeSiteInfo('customerInfo')" v-model="customerInfo.districtid" class="c82 site box1">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in districtList" :key="i" :value="it.districtid">{{it.districtname}}</option>
                </select>
            </li>
            <li class="flex-col flex-middle">
                <div class="tit">
                    <i class="cred">*</i>性别</div>
                <div class="padding-r20 c82">
                    <!-- <span class="dis-ib"></span> -->
                    <input type="radio" id="sex1" value="1" v-model="customerInfo.clientSex">
                    <label for="sex1">男</label>
                </div>
                <div class="padding-r15 c82 box-">
                    <!-- <span class="dis-ib"></span> -->
                    <input type="radio" id="sex2" value="2" v-model="customerInfo.clientSex">
                    <label for="sex2">女</label>
                </div>
            </li>
        </ul>
        <ul class="padding-lr15 bgfff margin-t10">
            <li class="flex-col flex-middle border-b">
                <div class="tit1">是否投资过房产</div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifInvestHouseProperty" value="1" v-model="customerInfo.ifInvestHouseProperty">
                    <label for="ifInvestHouseProperty">是</label>
                </div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifInvestHouseProperty1" value="2" v-model="customerInfo.ifInvestHouseProperty">
                    <label for="ifInvestHouseProperty1">否</label>
                </div>
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit1">是否投资过其他投资产品</div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifInvestElseThing" value="1" v-model="customerInfo.ifInvestElseThing">
                    <label for="ifInvestElseThing">是</label>
                </div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifInvestElseThing1" value="2" v-model="customerInfo.ifInvestElseThing">
                    <label for="ifInvestElseThing1">否</label>
                </div>
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit1">投资预算</div>
                <select v-model="customerInfo.investBudget" class="c82 site box1">
                    <option value="请选择" selected>请选择</option>
                    <option value="50w以下">50w以下</option>
                    <option value="50w-100w">50w-100w</option>
                    <option value="100w-200w">100w-200w</option>
                    <option value="200w-500w">200w-500w</option>
                    <option value="500w以上">500w以上</option>
                    <!-- <option v-for="(it,i) in districtList" :key="i" :value="it.districtid">{{it.districtname}}</option> -->
                </select>
                <!-- <input type="text" class="box1" v-model="customerInfo.investBudget" placeholder="请输入预算金额"> -->
            </li>
            <li class="flex-col border-b flex-middle">
                <div class="padding-r10">投资目的动机</div>
                <div class="box1 flex-parent">
                    <div class="padding-r10 c82">
                        <!-- <span class="dis-ib"></span> -->
                        <input type="radio" v-model="customerInfo.investPurpose" value="1" id="investPurpose1">
                        <label for="investPurpose1">长线投资</label>
                    </div>
                    <div class="padding-r10 c82">
                        <!-- <span class="dis-ib"></span> -->
                        <input type="radio" v-model="customerInfo.investPurpose" value="2" id="investPurpose2">
                        <label for="investPurpose2">短线投资</label>
                    </div>
                    <div class="padding-r10 c82 padding-t15">
                        <input type="radio" v-model="customerInfo.investPurpose" value="3" id="investPurpose3">
                        <label for="investPurpose3">住</label>
                    </div>
                    <div class=" c82 padding-t15">
                        <input type="radio" v-model="customerInfo.investPurpose" value="4" id="investPurpose4">
                        <label for="investPurpose4">租</label>
                    </div>
                </div>

            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit1">是否可以自己做主</div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifDecide" value="1" v-model="customerInfo.ifDecide">
                    <label for="ifDecide">是</label>
                </div>
                <div class="padding-r15 c82">
                    <input type="radio" id="ifDecide1" value="2" v-model="customerInfo.ifDecide">
                    <label for="ifDecide1">否</label>
                </div>
            </li>
            <li class="flex-col border-b flex-middle">
                <div class="padding-r10">客户性格类型</div>
                <div class="box1 flex-parent">
                    <div class="padding-r10 c82">
                        <input type="radio" id="clientCharacter1" value="1" v-model="customerInfo.clientCharacter">
                        <label for="clientCharacter1">开放型</label>
                    </div>
                    <div class="padding-r10  c82">
                        <input type="radio" id="clientCharacter2" value="2" v-model="customerInfo.clientCharacter">
                        <label for="clientCharacter2">传统型</label>
                    </div>
                    <div class="padding-r10  c82 padding-t15">
                        <input type="radio" id="clientCharacter3" value="3" v-model="customerInfo.clientCharacter">
                        <label for="clientCharacter3">多面型</label>
                    </div>
                    <div class="padding-t15  c82">
                        <input type="radio" id="clientCharacter4" value="4" v-model="customerInfo.clientCharacter">
                        <label for="clientCharacter4">活跃型</label>
                    </div>
                </div>
            </li>
            <li class="flex-col flex-middle border-b" id="city1">
                <div class="tit2">投资意向区域</div>
                <!-- <select @change="changeSiteInfo('customerInfo',4)" v-model="customerInfo.investLikesDistrictName" class="c82 site box1">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in cityAllList" :key="i" :value="it.cityname">{{it.cityname}}</option>
                </select> -->

                <select @change="changeSiteInfo('customerInfo',1,1)" v-model="customerInfo.investLikesProvinceCode" class="c82 box1 site margin-r15">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in provinceList" :key="i" :value="it.provinceid">{{it.provinceName}}</option>
                </select>
                <select @change="changeSiteInfo('customerInfo',2,1)" v-model="customerInfo.investLikesCityCode" class="c82 box1 site margin-r15">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in cityList1" :key="i" :value="it.cityid">{{it.cityname}}</option>
                </select>
                <select @change="changeSiteInfo('customerInfo',4,1)" v-model="customerInfo.investLikesDistrictCode" class="c82 site box1">
                    <option value="请选择">请选择</option>
                    <option v-for="(it,i) in districtList1" :key="i" :value="it.districtid">{{it.districtname}}</option>
                </select>
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit2">预算回报率</div>
                <input type="text" id="expectBack" v-model="customerInfo.expectBack" placeholder="请填写回报率">
                <label for="expectBack" class="box1">%</label>
            </li>
            <li class="flex-col flex-middle border-b">
                <div class="tit2">了解过什么同类产品</div>
                <input type="text" class="box1" v-model="customerInfo.knowElseThingname" placeholder="请填写产品名称">
            </li>
        </ul>
        <div class="flex-col bgfff margin-t10 padding-15">
            <div class="tit">备注</div>
            <textarea class="box1 padding-l20" v-model="customerInfo.remark" placeholder="请填写客户其他要求信息"></textarea>
        </div>

        <footer class="box-center footer font-14 box-center bgfff">
            <div class="cfff box-center" @click="addCustomer">确定</div>
        </footer>
    </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      districtList1: [],
      cityList1: [],
      customerInfo: {
        clientCode: "",
        clientName: "",
        clientPhone: "",
        clientIdcard: "",
        provinceid: "22", //省份id
        investLikesProvinceCode: "22", //省份id
        provinceName: "重庆市",
        investLikesProvinceName: "重庆市",
        cityid: "234", //城市
        investLikesCityCode: "234",
        cityName: "重庆市",
        investLikesCityName: "重庆市",
        districtid: "2005", // 区域
        districtName: "",
        clientSex: 0, //性别 1男 2女
        ifInvestHouseProperty: "0", //是否投资房产 1 是 2 否
        ifInvestElseThing: 0, //是否投资其他产品 1 是 2 否
        investBudget: "请选择", //投资预算
        investPurpose: 0, //投资目的 1长线投资 2短线投资 3住 4租
        ifDecide: 0, //是否能做主 1 是 2 否
        clientCharacter: 0, //客户性格 1开放型 2传统型 3多面型 4活跃型
        investLikesDistrictCode: "2005", //	用户有意向的投资区域编码
        investLikesDistrictName: "", //用户有意向的投资区域名称
        expectBack: 0, //预期回报率
        knowElseThingname: "", //了解过什么同类产品
        remark: "" //备注
      },
      cityAllList: null
    };
  },
  created() {
    // this.getAllCity();
  },
  watch: {
    // districtList(arr) {
    //     // 添加客户 来源区域和意向区域一样
    //   if (!this.$route.query.id) {
    //     this.districtList1 = arr;
    //   }
    // },
    // cityList(arr) {
    //   if (!this.$route.query.id) {
    //     this.cityList1 = arr;
    //   }
    // }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getProvince();
      if (that.$route.query.id) {
        let data = (that.customerInfo = that.getCache("clientInfo"));
        // 来源区域
        that.getCity(data.provinceid);
        that.getDistrict(data.cityid);
        // 意向区域
         that.getCity(data.investLikesProvinceCode,1);
        that.getDistrict(data.investLikesCityCode,1);
      } else {
        // 来源区域
        that.getCity(parseInt(22));
        that.getDistrict(parseInt(234));
        // 意向区域
        that.getCity(parseInt(22),1);
        that.getDistrict(parseInt(234),1);
      }
    });
  },
  methods: {
    // 添加客户
    addCustomer() {
      let that = this,
        ops = {};
      ops = this.customerInfo;

      // 姓名验证
      if (!this.customerInfo.clientName.length) {
        this.layer("客户姓名不能为空");
        return;
      }
      //手机验证
      if (!this.hasMobile(this.customerInfo.clientPhone)) {
        this.layer("请填写正确手机号");
        return;
      }
      // 身份证验证
      if (
        this.customerInfo.clientIdcard !== "" &&
        !this.hasUserCode(this.customerInfo.clientIdcard)
      ) {
        this.layer("请填写正确身份证号");
        return;
      }
      // 区域验证
      if (ops.districtid === "请选择") {
        this.layer("请选择来源区域");
        return;
      }
      // 性别验证
      if (!this.customerInfo.clientSex) {
        this.layer("请选择客户性别");
        return;
      }

      if (ops.clientCode) {
        delete ops["createTime"];
        delete ops["updateTime"];
      }

      // console.log(JSON.stringify(ops));
      //   return;
      this.http
        .post("client/save", ops)
        .then(re => {
          if (ops.clientCode) {
            that.layer("修改成功");
          } else {
            // that.layer("添加成功");
            that.alert("添加成功。现在就去楼盘详情报备吧！", 2, () => {
              that.toRouter("index");
            });
          }

          that.back();
        })
        .catch(res => {});
    },

    // 获取所有城市
    getAllCity() {
      let that = this;
      this.http
        .get("city/list", {
          location: true
        })
        .then(res => {
          that.cityAllList = res.cityList;
          // console.log('------------------------'+JSON.stringify(res));
        });
    }
  }
};
</script>


